@keyframes footer-appear
  from
    opacity 0
  to
    opacity 1

.p-footer
  overflow hidden
  user-select none
  animation footer-appear 0.6s ease
  margin 0 auto
  text-align center
  background var(--color-header-background)
  transition all 0.6s
  @media (min-width: $app_mobile_width_min)
    border 1px solid var(--color-clear)
    border-bottom none
    border-radius $gap * 0.5 $gap * 0.5 0 0
    padding $font_size * 0.5
    padding-bottom $font_size * 5
    width s('calc(100% - %s)', $drawer_width + $aside_width)
  @media (max-width: $app_mobile_width)
    padding $font_size 0
    padding-bottom s('calc(20vh + %s)', $font_size * 2)
    border-top $gap * 0.5 solid var(--color-clear)

.p-footer-powered, .p-footer-theme
  @media (min-width: $app_mobile_width_min)
    a
      display inline-block
      &:after
        content ''
        display block
        width 0
        height 1px
        margin-top -1px
        background var(--color-link)
        transition width 0.6s
      &:hover
        &:after
          width 100%

.p-footer-license
  font-size $font_size * 2
  line-height 1
  padding-top $gap
  a
    display inline-block
    img
      height $font_size * 2

:root.lyride
  .p-footer
    @media (min-width: $app_mobile_width_min)
      padding-bottom $font_size * 0.75
    @media (max-width: $app_mobile_width)
      padding-bottom $font_size * 1.25

:root.closeDrawer, :root.closeAside
  .p-footer
    width 100%